<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>计次卡核销</title>
    <link rel="stylesheet" href="__STATIC_URL__/static/mobile/css/weui.css"/>
    <link rel="stylesheet" href="__STATIC_URL__/static/mobile/css/example.css"/>
    <link rel="stylesheet" href="__STATIC_URL__/static/mobile/ydui/ydui.css" />
    <link rel="stylesheet" href="__STATIC_URL__/static/mobile/css/cardjc.css" />
</head>
<body>

<div class="container" id="container" style="position: inherit;">

    <div class="top" style="text-align: center;">
        <div class="header">
            <img src="{$info['logo_url']}" mode='aspectFill' class='shopLogo'/>
            <p class="name">{$info['brand_name']}</p>
            <div style="clear:both;"></div>
        </div>
        <div class="title">
            {$info['title']}
            <p class="pic">剩余{$info['surplus_num']}次</p>
        </div>
        <div class="btns">
            <input type="hidden" id="openid" value="{$info['openid']}">
            <input type="hidden" id="tims_id" value="{$info['id']}">
            <input type="hidden" id="mid" value="">
            <buton class="weui-btn weui-btn_primary" id="showIOSActionSheet" style="display:inline-block;width:40%">选择门店</buton>

            <buton class="weui-btn weui-btn_primary clickself" style="display:inline-block;width:40%">立即核销</buton>
        </div>
    </div>



    <div class="body">
        <div class="semi_circle"></div>
        <div class="semi_circle1"></div>
        <div class="weui-flex">
            <div>使用说明:</div>
            <div class="weui-flex__item">有效期内使用</div>
        </div>
        <div class="weui-flex">
            <div>截止日期:</div>
            <div class="weui-flex__item">{$info['end_time']|date="Y-m-d H:i:s",###}</div>
        </div>

    </div>

</div>

<div>
    <div class="weui-mask" id="iosMask" style="display: none"></div>
    <div class="weui-actionsheet" id="iosActionsheet">
        <div class="weui-actionsheet__title">
        </div>
        <div class="weui-actionsheet__menu">
            {volist name="mach" id="vo"}
            <div class="weui-actionsheet__cell" data-mid="{$vo['id']}">{$vo['merchant']}</div>

            {/volist}
        </div>
        <div class="weui-actionsheet__action">
            <div class="weui-actionsheet__cell" id="iosActionsheetCancel">取消</div>
        </div>
    </div>
</div>
<!-- 6位键盘 -->
<div class="m-keyboard" id="J_KeyBoard">
    <!-- 自定义内容区域 -->
    <div style="text-align: right;padding: .15rem .8rem 0;"><a href="#" style="color: #666;font-size: .24rem;">忘记密码</a></div>
    <!-- 自定义内容区域 -->
</div>
</body>
<script src="__STATIC_URL__/static/jquery/3.2.1/jquery.min.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="__STATIC_URL__/static/mobile/ydui/ydui.js"></script>
<script src="__STATIC_URL__/static/mobile/ydui/ydui.flexible.js"></script>
<script src="__STATIC_URL__/static/layer/layer.js" type="text/javascript" charset="utf-8"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript">
    wx.config({$share.wxjssdk});
    wx.ready(function(){
        wx.hideAllNonBaseMenuItem();
    });
</script>
<script>

    // ios
    $(function(){
        var $iosActionsheet = $('#iosActionsheet');
        var $iosMask = $('#iosMask');

        function hideActionSheet() {
            $iosActionsheet.removeClass('weui-actionsheet_toggle');
            $iosMask.fadeOut(200);
        }

        $iosMask.on('click', hideActionSheet);
        $('#iosActionsheetCancel').on('click', hideActionSheet);
        $(".weui-actionsheet__cell").on("click", function() {
          var mid=$(this).attr("data-mid");
          $("#mid").val(mid);
            hideActionSheet();

        })
        $("#showIOSActionSheet").on("click", function(){
            $iosActionsheet.addClass('weui-actionsheet_toggle');
            $iosMask.fadeIn(200);
        });
    });



</script>
<script>

    $("#Refresh").click(function(){
        window.location.reload();
    })

</script>
<script>
    var $keyboard = $('#J_KeyBoard');

    /* 初始化参数 */
    $keyboard.keyBoard({
        disorder: false, /* 是否打乱数字顺序 */
        title: '悟能安全键盘' /* 显示标题 */
    });

    /* 打开键盘 */
    $('.clickself').on('click', function () {
        var mid=$("#mid").val();

        if(mid==""){
            layer.msg("请先选择门店");
            return false;
        }
        $keyboard.keyBoard('open');
    });

    /* 六位密码输入完毕后执行 */
    $keyboard.on('done.ydui.keyboard', function (ret) {

        // console.log('输入的密码是：' + ret.password);
        var id=$("#tims_id").val();
        var openid=$("#openid").val();
        var mid=$("#mid").val();

        YDUI.dialog.loading.open('验证支付密码');
        $.ajax({
            url: "{:url('cardjc/cardjchx')}",
            type: 'post',
            dataType: 'json',
            data:{
                id:id,
                openid:openid,
                mid:mid,
                password:ret.password,
            },
            success: function (res) {

                console.log(111,res);
                if(res.code==0){
                    YDUI.dialog.loading.close();
                    $keyboard.keyBoard('close');
                    layer.msg(res.message);
                    setTimeout(function(){
                        window.location.reload()
                    },1500)
                }else{
                    YDUI.dialog.loading.close();
                    setTimeout(function(){
                        $keyboard.keyBoard('error', '对不起，您的支付密码不正确，请重新输入。');
                    },500)

                }

            }
            })


        /* 关闭键盘 */
        /* $keyboard.keyBoard('close'); */
    });
</script>


</html>
